<template>
  <div id="client">
    <div class="client-top">
      <el-select v-model="value" placeholder="请选择客户类别">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-input style="width: 240px;margin-left: 10px;margin-right: 20px;" placeholder="请输入客户编号" v-model="input"
        clearable>
      </el-input>
      <el-button type="primary">查询</el-button>
      <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="">导出</el-button>
    </div>
    <div class="client-content">
      <el-table height="500px" :data="pageInfo.list" border style="width: 100%;font-size: 13px;">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column fixed prop="clientTypeId" label="客户类别" width="150">
        </el-table-column>
        <el-table-column prop="clientLevelId" label="客户等级" width="120">
        </el-table-column>
        <el-table-column prop="clientCode" label="客户编号" width="120">
        </el-table-column>
        <el-table-column prop="clientName" label="客户名称" width="120">
        </el-table-column>
        <!-- <el-table-column prop="address" label="收款条件" width="300">
        </el-table-column> -->
        <el-table-column prop="areaId" label="地区" width="120">
        </el-table-column>
        <el-table-column prop="employeeId" label="销售人员" width="120">
        </el-table-column>
        <el-table-column label="联系人" width="480">
          <template slot-scope="scope">
            <!-- <span v-for="(contact, index) in allContact" :key="index">
              <span v-if="contact.clientId == scope.row.clientId"><br>
                {{ contact.contactName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                {{ contact.mobile }}
              </span>
            </span> -->
            <table id="contact-table" style="width: 100%; text-align:center;">
              <tr>
                <th>名称</th>
                <th>手机号</th>
                <th>邮箱</th>
                <th>联系地址</th>
              </tr>
              <tr v-for="(contact, index) in allContact" :key="index">
                <td v-if="contact.clientId == scope.row.clientId">
                  {{ contact.contactName }}
                </td>
                <td v-if="contact.clientId == scope.row.clientId">
                  {{ contact.mobile }}
                </td>
                <td v-if="contact.clientId == scope.row.clientId">
                  {{ contact.email }}
                </td>
                <td v-if="contact.clientId == scope.row.clientId">
                  {{ contact.contactAddress }}
                </td>
              </tr>
            </table>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="zip" label="送货地区" width="120">
        </el-table-column> -->
        <el-table-column prop="remark" label="备注" width="120">
        </el-table-column>
        <el-table-column prop="shouldPay" label="期初应收款" width="120">
        </el-table-column>
        <el-table-column prop="wishPay" label="期初预收款" width="300">
        </el-table-column>
        <el-table-column prop="status" label="是否启用" width="120">
          <template slot-scope="scope">
            <el-switch @change="changeStatus(scope.row.clientId, scope.row.status)" v-model="scope.row.status"
              active-color="#66b1ff" inactive-color="#c1c1c1" :active-value="1" :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="clientUpdate(scope.row)"></el-button>
            <el-button type="danger" @click="deleteClient(scope.row.clientId)" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination style="margin-left:700px;position: relative;bottom: 30px;" :current-page="pageInfo.pageNum"
      @current-change="handleCurrentChange" :page-size="pageInfo.pageSize" layout="total, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
    <el-dialog top="20px" title="新增客户" :visible.sync="dialogFormVisible">
      <AddClient :dialogFormVisible.sync="dialogFormVisible" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <!-- <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> -->
      </div>
    </el-dialog>
    <el-dialog top="20px" title="客户修改" :visible.sync="dialogUpdate">
      <UpdateClient :dialogUpdate.sync="dialogUpdate" :client="updateClient" :contactList="updateContactList" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdate = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import AddClient from './AddClient.vue';
import UpdateClient from './UpdateClient.vue';
export default {
  name: 'Client',
  components: {
    AddClient,
    UpdateClient
  },
  data() {
    return {//分页参数
      allContact: [],
      //新增对话框
      updateContactList: [],
      dialogUpdate: false,
      dialogFormVisible: false,
      switchValue: '1',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      input: '',
      pageInfo: {},
      updateClient: {}
    }
  },
  watch: {
    // 监听username的变化
    dialogFormVisible(newVal, oldVal) {
      this.getPage(1, 5)
    }
  },
  methods: {
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    handleCurrentChange(val) {
      this.getPage(val, 5)
    },
    getPage(pageNum, pageSize) {
      this.axios.get('/info/client/getClientPage',
        {
          params: {
            pageNum, pageSize
          }
        }

      ).then(rs => {
        if (rs.data.pageInfo != null) {
          this.pageInfo = rs.data.pageInfo
        }
      })
    },
    handleUpdateValue(newValue) {
      this.dialogFormVisible = newValue;
    },
    deleteClient(clientId) {
      this.$confirm('删除该客户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get('/info/client/deleteClient',
          {
            params: {
              clientId
            }
          }
        ).then(rs => {
          if (rs.data.code == 200) {
            this.successMessage("删除成功")
            this.getPage(1, 5)
          } else {
            this.errorMessage("删除出错了")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    successMessage(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
    errorMessage(msg) {
      this.$message({
        message: msg
        ,
        type: 'error'
      })
    },

    clientUpdate(client) {
      this.updateClient = client
      this.dialogUpdate = true
      this.getContactList()
    },
    // geClientTypeList()
    // {
    //   this.axios.get('/info/')
    // }

    //获取联系人列表
    getContactList() {
      this.axios.get('/info/contact/getContactList', {
        params: {
          clientId: this.updateClient.clientId
        }
      }).then(rs => {
        if (rs.data.contactList != null) {
          this.updateContactList = rs.data.contactList
        }
        if (rs.data.contactList.length == 0) {
          this.updateContactList = [
            {
              contactName: '',
              mobile: '',
              email: '',
              contactAddress: '',
            }
          ]
        }
      })
    },
    //设置状态
    changeStatus(clientId, value) {
      // console.log(providerId + ' ' + value)
      this.axios.get('/info/client/updateStatus',
        {
          params: {
            clientId,
            status: value
          }
        }
      ).then(rs => {
        if (rs.data.code == 200) {
          this.successMessage("设置成功")
        }
      })
      console.log(value)
    },
    getAllContact() {
      this.axios.get('/info/contact/getAllContact'

      ).then(rs => {
        this.allContact = rs.data.contactList
      })
    }
  },
  created() {
    this.getAllContact()
    setTimeout(() => {
    }, 300)
    this.getPage(1, 5)
  }

}
</script>

<style scoped>
#client {
  width: 100%;
  height: 100%;
}

.client-top {
  width: calc(100% -20px);
  height: 60px;
  /* background-color: pink; */
  line-height: 60px;
  padding-left: 20px;
  font-size: 13px;
}

.client-content {
  width: 100%;
  height: calc(100% - 60px);
  /* background-color: skyblue; */
}

.el-input,
.el-button {
  font-size: 13px;
}

#contact-table {
  border-collapse: collapse;
  text-align: center;
}

#contact-table th,
#contact-table td {
  border: 1px solid gray;
  padding: 0px;
}
</style>